<!--
 * @Author: your name
 * @Date: 2020-01-11 17:03:44
 * @LastEditTime: 2020-02-24 18:12:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template\src\views\coupon-manage\index.vue
 -->
<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="title">搜索条件</div>
      <div class="search-wrap">
        <el-form :inline="true" label-width="100px">
          <el-form-item label="模板编号：">
            <div class="item">
              <el-input v-model="get_discount_coupon_template_info_list.keywordNumber" placeholder="请输入关键词" clearable @keyup.enter.native="getDiscountCouponTemplateInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="模板名称：">
            <div class="item">
              <el-input v-model="get_discount_coupon_template_info_list.keywordName" placeholder="请输入关键词" clearable @keyup.enter.native="getDiscountCouponTemplateInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="优惠券类型：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_template_info_list.type"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponTemplateInfoList"
              >
                <el-checkbox :label="0" border>立减</el-checkbox>
                <el-checkbox :label="1" border>折扣</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="优惠码领取：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_template_info_list.is_promotion_code "
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponTemplateInfoList"
              >
                <el-checkbox :label="0" border>否</el-checkbox>
                <el-checkbox :label="1" border>是</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="用户类型：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_template_info_list.user_type"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponTemplateInfoList"
              >
                <el-checkbox :label="0" border>新用户</el-checkbox>
                <el-checkbox :label="1" border>老用户</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="never">
      <div>
        <span class="title">优惠券模板管理</span>
        <el-button
          class="title-button-right"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="openAddCouponTemplateDialog()"
        >新建优惠卷模板</el-button>
      </div>

      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_discount_coupon_template_info_list.data"
        class="table"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
        @selection-change="getSelection"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="50" />
        <el-table-column prop="discount_coupon_template_number" label="优惠券模板编号" />
        <el-table-column prop="name" label="优惠券模板名称" />
        <!-- <el-table-column prop="subhead" label="优惠券副标题" /> -->
        <el-table-column prop="type" label="优惠券类型">
          <template slot-scope="{ row }">
            <span>{{ type[row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠方式">
          <template slot-scope="{ row }">
            <span v-if="row.type === 0">{{ '满'+row.full_price+'减'+row.subtract_price }}</span>
            <span v-else-if="row.type === 1">{{ '满'+row.full_price+'折'+row.discount }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="full_price" label="满多少" />
        <el-table-column prop="subtract_price" label="立减多少" />
        <el-table-column prop="discount" label="折扣" /> -->
        <!-- <el-table-column prop="is_promotion_code" label="是否以优惠码领取">
          <template slot-scope="{ row }">
            <span>{{ is_promotion_code[row.is_promotion_code] }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="is_restrict_expiry_coupon" label="失效后是否可再领取">
          <template slot-scope="{ row }">
            <span>{{ is_restrict_expiry_coupon[row.is_restrict_expiry_coupon] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="is_restrict_expiry_coupon" label="是否限制再次领用优惠券">
          <template slot-scope="{ row }">
            <span>{{ is_restrict_expiry_coupon[row.is_restrict_expiry_coupon] }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="user_type" label="用户类型">
          <template slot-scope="{ row }">
            <span>{{ user_type[row.user_type] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="restrict_number" label="每人限领数量" /> -->
        <el-table-column prop="is_fixed_date" label="是否固定日期">
          <template slot-scope="{ row }">
            <span>{{ is_fixed_date[row.is_fixed_date] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="commencement_date" label="生效时间" />
        <el-table-column prop="expiry_date" label="失效时间" />
        <el-table-column prop="expiry_day" label="有效天数">
          <template slot-scope="{ row }">
            <span v-if="row.expiry_day === 0">{{ '暂无' }} </span>
            <span v-else>{{ '自领取日起'+row.expiry_day+'天' }} </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="create_time" label="创建时间" /> -->
        <!-- <el-table-column prop="direction_for_use" label="使用说明" /> -->
        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="opendiscountCouponTemplateInfoListDialog(row)">详情</el-button>
            <el-button type="success" @click="openChangeCouponTemplateDialog(row)">编辑</el-button>
            <!-- <el-button type="primary" @click="changeStatusDialog=true">修改状态</el-button>
            <el-button type="danger">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表 -->

      <!-- 数据表左下方功能区 -->
      <div>
        <el-button
          class="card-bottom-button-left"
          type="danger"
          icon="el-icon-delete"
          plain
          :disabled="deleteDisabled"
          @click="deleteDiscountCouponTemplateInfo"
        >删除</el-button>
      </div>
      <!-- 数据表左下方功能区 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_discount_coupon_template_info_list.total"
        :page-size="get_discount_coupon_template_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_discount_coupon_template_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->

      <!-- 优惠卷模板信息详情Dialog -->
      <el-dialog
        :title="'优惠券模板编号 '+discount_coupon_template_info.discount_coupon_template_number"
        :visible.sync="discountCouponTemplateInfoListDialog"
        width="800px"
        :close-on-click-modal="false"
      >
        <el-divider content-position="left">优惠券模板信息</el-divider>
        <el-form :inline="true" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠券模板名称">
                <span>{{ discount_coupon_template_info.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优惠券副标题">
                <span>{{ discount_coupon_template_info.subhead }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :inline="true" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠券类型">
                <span>{{ type[discount_coupon_template_info.type] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优惠码">
                <span><span>{{ is_not[discount_coupon_template_info.is_promotion_code] }}</span></span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :inline="true" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠方式">
                <span v-if="discount_coupon_template_info.type === 0">{{ '满'+discount_coupon_template_info.full_price+'减'+discount_coupon_template_info.subtract_price }}</span>
                <span v-else-if="discount_coupon_template_info.type === 1">{{ '满'+discount_coupon_template_info.full_price+'折'+discount_coupon_template_info.discount }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户类型">
                <span>{{ user_type[discount_coupon_template_info.user_type] }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :inline="true" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否固定日期">
                <span>{{ is_not[discount_coupon_template_info.is_fixed_date] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效天数">
                <span>{{ '自领取日起'+discount_coupon_template_info.expiry_day+'天' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form :inline="true" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="生效日期">
                <span>{{ discount_coupon_template_info.commencement_date }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失效日期">
                <span>{{ discount_coupon_template_info.expiry_date }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form label-width="110px">
          <el-col :span="12">
            <el-form-item label="失效后是否可再领取">
              <span>{{ is_restrict_expiry_coupon[discount_coupon_template_info.is_restrict_expiry_coupon] }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用说明">
              <span>{{ discount_coupon_template_info.direction_for_use }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-form-item label="使用说明">
            <span>{{ discount_coupon_template_info.direction_for_use }}</span>
          </el-form-item>
        </el-form> -->
        </el-form>
      </el-dialog>
      <!-- 改变优惠券状态Dialog -->

      <!-- 新增/修改优惠券Dialog -->
      <el-dialog
        :title="change_discount_coupon_template_info_title"
        :visible.sync="couponTemplateDialog"
        width="600px"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-form
          ref="changeDiscountCouponTemplateForm"
          :model="change_discount_coupon_template_info"
          min-width="110px"
          status-icon
          size="mini"
          label-width="120px"
        >
          <el-form-item prop="name" :rules="rules.input" label="模板名称:">
            <el-input v-model="change_discount_coupon_template_info.name" style="width:310px" placeholder="请输入优惠券模板名称" />
          </el-form-item>
          <el-form-item prop="subhead" :rules="rules.input" label="优惠券副标题:">
            <el-input v-model="change_discount_coupon_template_info.subhead" style="width:310px" placeholder="请输入优惠券副标题" />
          </el-form-item>
          <el-form-item prop="type" :rules="rules.select" label="优惠券类型:">
            <el-radio-group v-model="change_discount_coupon_template_info.type">
              <el-radio :label="0">
                立减
                <span>满</span>
                <el-input v-model="change_discount_coupon_template_info.full_price" type="number" style="width:105px" placeholder="满（元）" />
                <span>减</span>
                <el-input v-model="change_discount_coupon_template_info.subtract_price" type="number" size="mini" style="width:105px" placeholder="减（元）" />
                <span class="unit">&nbsp;&nbsp;元</span>
              </el-radio><br>
              <el-radio :label="1">
                折扣
                <el-input v-model="change_discount_coupon_template_info.discount" type="number" style="margin-top:6px" size="mini" placeholder="请输入优惠券折扣(如8.8折)" />
                <span class="unit">&nbsp;&nbsp;折</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="is_promotion_code" :rules="rules.select" label="用优惠码领取:">
            <el-radio-group v-model="change_discount_coupon_template_info.is_promotion_code" size="mini">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="is_restrict_expiry_coupon" :rules="rules.select" label="失效后是否可再领取:">
            <el-radio-group v-model="change_discount_coupon_template_info.is_restrict_expiry_coupon" size="mini">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="user_type" :rules="rules.select" label="用户类型:">
            <el-select v-model="change_discount_coupon_template_info.user_type" style="width: 310px" placeholder="请选择优惠券用户类型">
              <el-option
                v-for="item in optionsUserType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="restrict_number" :rules="rules.input" label="每人限领数量:">
            <el-input v-model="change_discount_coupon_template_info.restrict_number" style="width: 310px" type="number" placeholder="请输入优惠券每人限制领取数量" />
          </el-form-item>
          <el-form-item prop="is_fixed_date" :rules="rules.select" label="有效时间:">
            <el-radio-group v-model="change_discount_coupon_template_info.is_fixed_date">
              <el-radio :label="1">
                固定日期:
                <el-date-picker
                  v-model="datePicker"
                  style="width:218px"
                  type="datetimerange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="生效时间"
                  end-placeholder="失效时间"
                  :picker-options="pickerOptions"
                  @change="changePickTime"
                />
              </el-radio><br>
              <el-radio :label="0">领取后，当天生效，有效天数:
                <el-input v-model="change_discount_coupon_template_info.expiry_day" style="width:96px;margin:6px 0 0 " placeholder="有效天数" />
                <span class="unit">&nbsp;&nbsp;天</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="direction_for_use" :rules="rules.input" label="使用说明:">
            <el-input v-model="change_discount_coupon_template_info.direction_for_use" type="textarea" placeholder="请输入优惠券使用说明" style="width:310px" clearable />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="couponTemplateDialog = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="changeDiscountCouponTemplateInfo">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 新增优惠券Dialog -->
    </el-card>
  </div>
</template>

<script>
import { getDiscountCouponTemplateInfoList, changeDiscountCouponTemplateInfo, deleteDiscountCouponTemplateInfo } from '@/api/coupon-template'
import { pickerOptionsMixin } from '@/mixins/pickerOptions'
import { getDatatime } from '@/common/js/until'
export default {
  mixins: [pickerOptionsMixin],
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 260,

      // loading开关
      dataRequestLoading: false,

      discountCouponTemplateInfoListDialog: false, // 优惠券模板信息详情Dialog
      changeStatusDialog: false, // 修改优惠券状态Dialog
      couponTemplateDialog: false, // 修改优惠券状态Dialog
      radio: '3',
      datePicker: [],
      create_time: '1',
      textarea: '',
      value2: '',
      change_discount_coupon_template_info_title: '', // 新增/修改优惠券模板信息标题
      // 按钮开关
      deleteDisabled: true,
      // 显示优惠券类型
      type: {
        0: '立减',
        1: '折扣'
      },
      // 是否以优惠码形式
      is_promotion_code: {
        0: '否',
        1: '是'
      },
      // 是否固定日期
      is_fixed_date: {
        0: '否',
        1: '是'
      },
      // 失效后是否可再次领取
      is_restrict_expiry_coupon: {
        0: '否',
        1: '是'
      },
      // 显示是否
      is_not: {
        0: '否',
        1: '是'
      },

      // 显示用户类型
      user_type: {
        0: '新用户',
        1: '老用户'
      },
      // 用户类型选择
      optionsUserType: [
        { value: 0, label: '新用户' },
        { value: 1, label: '老用户' }
      ],

      // 查询优惠券模板信息列表参数
      get_discount_coupon_template_info_list: {
        pageSize: 20,
        currentPage: 1,
        keywordNumber: '',
        keywordName: '',
        sort_name: '',
        sort: 'desc',
        type: [0, 1],
        is_promotion_code: [0, 1],
        user_type: [0, 1],
        is_fixed_date: [0, 1]
      },
      // 查询优惠券模板信息列表参数返回值
      data_discount_coupon_template_info_list: {
        data: [],
        tatal: 0
      },
      // 优惠券模板详情信息
      discount_coupon_template_info: {
        discount_coupon_template_number: '',
        name: '',
        subhead: '',
        type: '',
        is_promotion_code: '',
        full_price: '',
        subtract_price: '',
        discount: '',
        direction_for_use: '',
        user_type: '',
        restrict_number: '',
        commencement_date: '',
        expiry_date: '',
        is_fixed_date: '',
        expiry_day: '',
        is_restrict_expiry_coupon: ''
      },
      // 新增优惠券模板信息参数
      change_discount_coupon_template_info: {
        discount_coupon_template_id: '',
        name: '',
        subhead: '',
        type: '',
        is_promotion_code: 0,
        full_price: '',
        subtract_price: '',
        discount: '',
        direction_for_use: '',
        user_type: '',
        restrict_number: '',
        commencement_date: '',
        expiry_date: '',
        is_fixed_date: '',
        expiry_day: '',
        is_restrict_expiry_coupon: 0
      },
      // 表单校验规则
      rules: {
        input: {
          required: true,
          message: '请完成输入！',
          trigger: 'blur'
        },
        select: {
          required: true,
          message: '请完成选择！',
          trigger: 'blur'
        },
        image: {
          required: true,
          message: '请完成输入！',
          trigger: 'blur'
        }
      }
    }
  },
  mounted() {
    this.getDiscountCouponTemplateInfoList()
  },
  methods: {
    // 查询优惠券模板信息列表
    getDiscountCouponTemplateInfoList() {
      this.dataRequestLoading = true
      getDiscountCouponTemplateInfoList(this.get_discount_coupon_template_info_list).then(res => {
        this.data_discount_coupon_template_info_list.data = res.result.showing
        this.data_discount_coupon_template_info_list.total = res.result.total
        this.dataRequestLoading = false
      })
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_discount_coupon_template_info_list.pageSize = data
      this.getDiscountCouponTemplateInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_discount_coupon_template_info_list.currentPage = data
      this.getDiscountCouponTemplateInfoList()
    },
    // 打开优惠券模板信息详情
    opendiscountCouponTemplateInfoListDialog(row) {
      this.discount_coupon_template_info = {
        discount_coupon_template_number: row.discount_coupon_template_number,
        name: row.name,
        subhead: row.subhead,
        type: row.type,
        is_promotion_code: row.is_promotion_code,
        full_price: row.full_price,
        subtract_price: row.subtract_price,
        discount: row.discount,
        direction_for_use: row.direction_for_use,
        user_type: row.user_type,
        restrict_number: row.restrict_number,
        commencement_date: row.commencement_date,
        expiry_date: row.expiry_date,
        is_fixed_date: row.is_fixed_date,
        expiry_day: row.expiry_day,
        is_restrict_expiry_coupon: row.is_restrict_expiry_coupon
      }
      this.discountCouponTemplateInfoListDialog = true
    },
    // 打开编辑优惠券模板
    openChangeCouponTemplateDialog(row) {
      this.change_discount_coupon_template_info_title = '编辑优惠券模板'
      this.change_discount_coupon_template_info = {
        discount_coupon_template_id: row.discount_coupon_template_id,
        name: row.name,
        subhead: row.subhead,
        type: row.type,
        is_promotion_code: row.is_promotion_code,
        full_price: row.full_price,
        subtract_price: row.subtract_price,
        discount: row.discount,
        direction_for_use: row.direction_for_use,
        user_type: row.user_type,
        restrict_number: row.restrict_number,
        commencement_date: row.commencement_date,
        expiry_date: row.expiry_date,
        is_fixed_date: row.is_fixed_date,
        expiry_day: row.expiry_day,
        is_restrict_expiry_coupon: row.is_restrict_expiry_coupon
      }
      this.datePicker = [row.commencement_date, row.expiry_date]
      this.couponTemplateDialog = true
    },
    // 打开新建优惠券模板
    openAddCouponTemplateDialog() {
      this.change_discount_coupon_template_info_title = '新建优惠券模板'
      this.change_discount_coupon_template_info = {
        discount_coupon_template_id: '',
        name: '',
        subhead: '',
        type: '',
        is_promotion_code: '0',
        full_price: '',
        subtract_price: '',
        discount: '',
        direction_for_use: '',
        user_type: '',
        restrict_number: '',
        commencement_date: '',
        expiry_date: '',
        is_fixed_date: '',
        expiry_day: '',
        is_restrict_expiry_coupon: 0
      }
      this.datePicker = []
      this.couponTemplateDialog = true
    },

    // 新增/修改优惠券模板信息
    changeDiscountCouponTemplateInfo() {
      this.$refs.changeDiscountCouponTemplateForm.validate(valid => {
        if (valid) {
          changeDiscountCouponTemplateInfo(this.change_discount_coupon_template_info).then(res => {
            this.getDiscountCouponTemplateInfoList()
            this.couponTemplateDialog = false
          })
        } else {
          return false
        }
      })
    },
    // 处理模板期限
    changePickTime() {
      this.change_discount_coupon_template_info.commencement_date = getDatatime(this.datePicker[0])
      this.change_discount_coupon_template_info.expiry_date = getDatatime(this.datePicker[1])
    },
    // 删除优惠券模板信息
    deleteDiscountCouponTemplateInfo() {
      this.$confirm('此操作将永久删除该优惠券模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const discount_coupon_template_id = []
          this.selection.forEach(val => {
            discount_coupon_template_id.push(val.discount_coupon_template_id)
          })
          deleteDiscountCouponTemplateInfo({ discount_coupon_template_id: discount_coupon_template_id }).then(res => {
            this.$notify({
              title: '成功',
              message: '删除优惠券模板成功！',
              type: 'success'
            })
            this.getDiscountCouponTemplateInfoList()
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
    },
    // 获取选择项
    getSelection(selection) {
      if (selection.length === 0) {
        this.deleteDisabled = true
      } else {
        this.deleteDisabled = false
      }
      this.selection = selection
    }
  }
}
</script>
<style lang="scss" scoped>
.newCoupon {
  padding: 10px;
  color: #606266;
  width: 100%;
  display: inline-block;
  .item {
    padding: 10px 0;

    .label {
      width: 100px;
      float: left;
      line-height: 29px;
      margin-bottom: 5px;
      font-size: 14px;
      text-align: right;
    }
  }
  .unit {
    font-size: 14px;
  }
  .el-input {
    width: 300px;
  }
  .recordNumber {
    float: left;
    position: relative;
    padding-left: -20px;
    font-size: 12px;
  }
}
.title-button-right {
  float: right;
  margin-right: 20px;
}
.dialogDetails {
  float: left;
  font-size: 14px;
}
</style>
